var valicode
changeCode = function () {
  var cvs = document.getElementById('cvs')
  valicode = drawcode(cvs)
}
valiCode = function () {
  var code = document.getElementById('inCode').value
  if (code.toString() === valicode.toString()) {
    return true
  } else {
    document.getElementById('err').innerHTML = '输入的验证码错误'
    changeCode()
    return false
  }
}
window.onload = changeCode

//定义变量
var w = 80
var h = 24
var fontsize = h - 6
var str = '+-'

//随机生成最大值不超过max的整数
function randInt(max) {
  return Math.floor((Math.random() * 100000) % max)
}

//生成随机长度的字符串验证码
function randCode(len) {
  var one = randInt(10)
  var two = randInt(10)
  var op = str.charAt(randInt(str.length))
  return '' + one + op + two + '='
}

//生成随机颜色
function randColor() {
  var r = randInt(256)
  var g = randInt(256)
  var b = randInt(256)
  return 'rgb(' + r + ',' + g + ',' + b + ')'
}

//绘制图片
function drawcode(canvas) {
  var valicode = randCode()
  w = 5 + fontsize * valicode.length

  if (canvas != null && canvas.getContext && canvas.getContext('2d')) {
    //设置显示区域
    canvas.style.width = w
    //设置画板
    canvas.setAttribute('width', w)
    canvas.setAttribute('height', h)
    //设置画笔
    var pen = canvas.getContext('2d')
    //绘制背景
    pen.fillStyle = 'rgb(255, 255, 255)'
    pen.fillRect(0, 0, w, h)
    //设置水平线位置
    pen.textBaseline = 'top'
    //绘制内容
    for (var i = 0; i < valicode.length; i++) {
      pen.fillStyle = randColor()
      pen.font = 'bold ' + (fontsize + randInt(3)) + 'px 微软雅黑'
      pen.fillText(valicode.charAt(i), 5 + fontsize * i, randInt(5))
    }
    //绘制噪音线
    for (var i = 0; i < 2; i++) {
      pen.moveTo(randInt(w) / 2, randInt(h)) //设置起点
      pen.lineTo(randInt(w), randInt(h)) //设置终点
      pen.strokeStyle = randColor()
      pen.lineWidth = 2 //线条粗细
      pen.stroke()
    }
    //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
    valicode = valicode.substr(0, valicode.length - 1)
    //eval()方法，把字符串当表达式处理
    return eval(valicode)
  }
}
